<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height:4000px;
            width:2000px;
        }
        #box {
            width:300px; 
            height:300px;
            background-color:yellowgreen;
            border-radius:5px;
            /* margin:0 auto; */
            padding:5px;
            overflow: auto;
            /* transform: rotate(45deg); */
        }
        button {
            margin-left:-6px;
        }

    </style>
</head>
<body>

    <div id="box">点我返回快乐老家
    <!-- <div id="box" >点我返回快乐老家 -->
        <input type="text" id="input">
    </div>
    <ul id="list">
        <li id="li1">1</li>
        <li id="li2">2</li>
        <li id="li3">3</li>
        <li id="li4">4</li>
    </ul>

    <a href="http://cf.qq.com">点我快乐</a>

    <script src="./jquery-1.8.3.min.js"></script>
    <!-- <script async src="https://code.jquery.com/jquery-1.8.3.min.js"></script> -->
    <script>
        var EventUtil = {
            // 添加事件
            addHandler:function(element, type, handler){
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                } else {
                    element["on" + type] = handler;
                }
            },
            // 移除事件
            removeHandler: function(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else if(element.detachEvent) {
                    element.detachEvent(type, handler);
                } else {
                    element["on" + type] = null;
                }
            },
            getEvent: function(event) {
                return event ? event : window.event;
            },
            getTarget: function(event) {
                return event.target || event.srcElement;
            },
            preventDefault: function(event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else  {
                    event.returnValue = false;
                }
            },
            stopPropagation: function(event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;
                }
            },
            getRelatedTarget:function(event){
                if (event.relatedTarget) {
                    return event.relatedTarget;
                } else if (event.toElement) {
                    return event.toElement;
                } else if (event.fromElement) {
                    return event.fromElement;
                } else {
                    return null;
                }
            }
        };

        var box = document.getElementById('box'),
            list = document.getElementById('list');

         function f (e) {
            console.log('= =', e.eventPhase)
        }
        function p () {
            console.log('= =!!!!')
        }

        // box.onclick = function () {
        //     console.log(event, arguments)
        // }


        /*==================================  测试区  =============================================*/ 

        // var count = 0;


        // EventUtil.addHandler(window, 'pageshow', function(event){
        //     var event = EventUtil.getEvent(event);
        //     console.log('pageshow')
        // });


        /*==================================  attachEvent区  =============================================*/ 
    
        // window.attachEvent('onclick', function(event){
        //     console.log('window')
        // });
        // document.attachEvent('onclick', function(event){
        //     console.log('document')
        // });
        // document.body.attachEvent('onclick', function(event){
        //     console.log('body')
        // });
        box.attachEvent('onclick', function (event) {
            console.log(arguments[0], event)
        });


        // EventUtil.addHandler(window, 'click', function(event){
        //     console.log('window')
        // })

        // input.attachEvent('onfocusout', function(event){
        //     console.log('input')
        // });
        // box.attachEvent('onfocusout', function(event){
        //     console.log('box')
        // });


        /*==================================  addEventListener区  =============================================*/ 

        // window.addEventListener('select', function(event){
        //     console.log('window')
        //     event.stopImmediatePropagation()
        // }, true);
        // window.addEventListener('click', function(event){
        //     console.log('window2')
        //     event.stopPropagation()
        // }, true);
        // document.addEventListener('click', function(f){
        //     console.log('document', event === window.event, arguments, f)
        // }, true);
        // document.body.addEventListener('click', f, true);
        // document.body.addEventListener('click', f, false);
        // box.addEventListener('click', function () {
        //     console.log('0000')
        // });

        // document.body.removeEventListener('click', f, true)


        // input.addEventListener('blur', function(event){
        //     console.log('input')
        // });

        // box.addEventListener('blur', function(event){
        //     console.log('box');
        //     // console.log(document.activeElement)
        // }, true);
        

        /*==================================  DOM0级区  =============================================*/ 
        // window.onclick =  function(event){
        //     console.log('window')
        // };
        // document.onclick =  function(event){
        //     console.log('document')
        // };
        // document.body.onclick =  function(event){
        //     console.log('body')
        // };
        // box.onclick =  function(){
        //     console.log('box', event, arguments[0])
        // };
 

        // btn.onmouseout = function(event){
        //     console.log('onmouseout','btn')
        // }

        // document.body.onclick = function(event){
        //     console.log( 'body');
        // }

        // box.onclick = function(event){
        //     var event = EventUtil.getEvent(event);
        //     var keys = new Array();
        //     if (event.shiftKey) {
        //         keys.push('shift');
        //     }
        //     if (event.ctrlKey) {
        //         keys.push('ctrl');
        //     }
        //     if (event.altKey) {
        //         keys.push('altKey');
        //     }
        //     if (event.metaKey) {
        //         keys.push('meta');
        //     }
        //     console.log(event.metaKey);
        //     console.log('keys:' + keys.join('、'));
        // }

        // window.onclick = function(event){
        //     var event = EventUtil.getEvent(event);
        //     console.log(event.clientX, event.clientY);
        //     console.log(event.pageX, event.pageY);
        // }

        // box.onmouseover = function(event){
        //     var event = EventUtil.getEvent(event);
        //     console.log('box-mouseover', event.relatedTarget);
        // }

        
        // box.onmouseout = function(event){
        //     var event = EventUtil.getEvent(event);
        //     console.log('box-mouseout', event.toElement, event.eventPhase);
        // }

        
    //    box.onmousedown= function(event){
    //         // if(event.eventPhase === 3) return;
    //         var event = EventUtil.getEvent(event);
    //         alert('onmousedown触发')
    //     }
    //     box.onmouseup = function(event){
    //         // if(event.eventPhase === 3) return;
    //         var event = EventUtil.getEvent(event);
    //         alert('onmouseup触发')
    //     }
    //     box.onclick = function(event){
    //         // if(event.eventPhase === 3) return;
    //         var event = EventUtil.getEvent(event);
    //         alert('onclick触发')
    //     }




    </script>
    
</body>
</html>